<template>
  <div>
    <button @click="show" v-if="showBtn">点击我显示文本</button>
    <input type="text" ref="inp">
  </div>
</template>

<script>
export default {
 

  data() {
    return {
      showBtn:true
    };
  },
  methods:{
    show(){
      this.showBtn=false,
      //需求:文本框显示时,自动获取焦点
      //this.$refs.inp为什么是undfined?
      //DOM 更新是异步
      //解决方案:$nextwork
      this.$nextTick(()=>{
        this.$refs.inp.focus()
       });
    }
  }

  

 
};
</script>

<style lang="scss" scoped>

</style>